<template>
	<view>
		<NavBar text='' />
		<view class="backgrpund">
			<view style="width: 100%; height: 200rpx;"></view>
			<view class="headerStyle flx">
				<view>
					<view class="headerName">{{userInfo.name}}</view>
					<view class="flx1">
						<view class="headertext">{{userInfo.zw}}</view>
						<view class="headertext">{{userInfo.ks}}</view>
					</view>
					<view class="flx1">
						<view class="headertext">
							{{userInfo.hospital}}
						</view>
						<view style="margin-top:10rpx;" class="flxAlign">
							<u-icon name="arrow-right" color="#fff" size="30rpx"></u-icon>
						</view>
					</view>
				</view>
				<view class="headerStyle_header">
					<image src="/static/reservationRegister/userheader.png"></image>
				</view>
			</view>
		</view>

		<view style="position: relative;">
			<view class="dottor" style="position: absolute; top: -70rpx;">
				<view class="dottor_">
					<view class="dottor_one flx">
						<view class="dottor_text">
							<view class="dottor_text_one">{{userxxInfo.pm}}</view>
							<view class="dottor_text_two">综合排名</view>
						</view>
						<view class="dottor_text">
							<view class="dottor_text_one">{{userxxInfo.pv}}</view>
							<view class="dottor_text_two">好评率</view>
						</view>
						<view class="dottor_text">
							<view class="dottor_text_one">{{userxxInfo.number}}</view>
							<view class="dottor_text_two">已预约</view>
						</view>
						<view class="dottor_text">
							<view class="dottor_text_one">{{userxxInfo.date}}</view>
							<view class="dottor_text_two">执业年限</view>
						</view>

					</view>
					<view class="border_"></view>
					<view class="dottor_info u-line-2">
						<span class="dottor_info_header">专业擅长</span>
						<span class="dottor_info_text">{{userxxInfo.begood}}</span>
					</view>
					<view class="dottor_info u-line-2">
						<span class="dottor_info_header">个人简介</span>
						<span class="dottor_info_text">{{userxxInfo.meinfo}}</span>
					</view>
					<view class="flxEnd" style="margin-top: 20rpx;">
						<view class="flx1">
							<view class="more_text">查看更多</view>
							<view class="flxAlign">
								<u-icon name="arrow-right" color="#94b0ed" size="30rpx"></u-icon>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view style="width: 100%; height: 370rpx;"></view>
			<view class="VisitingInformation">
				<view class="VisitingInformation_header">出诊信息</view>
				<view class="VisitingInformation_b" style="margin-top:40rpx;">
					<view class="flx">
						<view class="flx1">
							<view class="VisitingInformation_b_left">出诊2</view>
							<view class="VisitingInformation_b_left_">
								<view class="VisitingInformation_b_header">{{visitinfo.hospital}}</view>
								<view class="VisitingInformation_b_ks">{{userInfo.ks}}</view>
							</view>
						</view>
						<view class="VisitingInformation_yh">
							有号
						</view>
					</view>


					<view class="flx">
						<view>
							<view style="margin-top:90rpx;"></view>
							<view
								style="font-size: 25rpx; color:#cecece;width: 20rpx; text-align: cneter; margin-left: 10rpx; line-height: 45rpx;">
								上午</view>
							<view
								style="font-size: 25rpx; color:#cecece;width: 20rpx; text-align: cneter; margin-left: 10rpx; line-height: 45rpx; margin-top:6rpx;">
								下午</view>
							<view
								style="font-size: 25rpx; color:#cecece;width: 20rpx; text-align: cneter; margin-left: 10rpx; line-height: 45rpx; margin-top:3rpx;">
								夜间</view>
						</view>
						<view class="datestyle">
							<view class="flx">
								<view class="datestyle_index" v-for="(item,index) in 7" :key="index">
									<view v-if="index + 1 == 1">
										<view class="datestyle_index_z">周四</view>
										<view class="datestyle_index_d">04/27</view>
									</view>
									<view v-if="index + 1 == 2">
										<view class="datestyle_index_z">周五</view>
										<view class="datestyle_index_d">04/28</view>
									</view>
									<view v-if="index + 1 == 3">
										<view class="datestyle_index_z">周六</view>
										<view class="datestyle_index_d">04/29</view>
									</view>
									<view v-if="index + 1 == 4">
										<view class="datestyle_index_z">周日</view>
										<view class="datestyle_index_d">04/30</view>
									</view>
									<view v-if="index + 1 == 5">
										<view class="datestyle_index_z">周一</view>
										<view class="datestyle_index_d">04/27</view>
									</view>
									<view v-if="index + 1 == 6">
										<view class="datestyle_index_z">周二</view>
										<view class="datestyle_index_d">05/01</view>
									</view>
									<view v-if="index + 1 == 7">
										<view class="datestyle_index_z">周三</view>
										<view class="datestyle_index_d">05/02</view>
									</view>
								</view>
							</view>
							<view class="flx" style="margin-top:20rpx;">
								<view class="datestyle_index_one" v-for="(item,index) in 7" :key="index">
									<view v-if="index == 3" @click="moreRegister"
										style="width: 100%; height: 100%; background-color: #eaf0ff; color: #4477f1; font-size: 25rpx; letter-spacing: 1rpx; text-align: center; line-height: 75rpx; font-weight: 600;">
										剩余2</view>
										<view v-if="index == 6" @click="moreRegister"
											style="width: 100%; height: 100%; background-color: #eaf0ff; color: #4477f1; font-size: 25rpx; letter-spacing: 1rpx; text-align: center; line-height: 75rpx; font-weight: 600;">
											预约</view>
								</view>
							</view>
							<view class="flx" style="margin-top:20rpx;">
								<view class="datestyle_index_one" v-for="(item,index) in 7" :key="index">
									<view v-if="index == 1" @click="moreRegister"
										style="width: 100%; height: 100%; background-color: #eaf0ff; color: #4477f1; font-size: 25rpx; letter-spacing: 1rpx; text-align: center; line-height: 75rpx; font-weight: 600;">
										剩余2</view>
								</view>
							</view>
							<view class="flx" style="margin-top:20rpx;">
								<view class="datestyle_index_one" v-for="(item,index) in 7" :key="index">
									<view v-if="index == 6"
										style="width: 100%; height: 100%; background-color: #eaf0ff; color: #4477f1; font-size: 25rpx; letter-spacing: 1rpx; text-align: center; line-height: 75rpx; font-weight: 600;">
										剩余2</view>
								</view>
							</view>

						</view>

					</view>
				</view>
			</view>

			<view class="PatientEvaluation">
				<view style="width: 95%; margin:0 auto;">
					<view style="width: 100%; height: 20rpx;"></view>
					<view class="PatientEvaluation_header">患者评价<span>（{{comment.length}}）</span></view>

					<view
						style="background-color: #fff; border-radius: 20rpx 20rpx 0; margin-top:20rpx; padding: 15rpx;">
						<view style="width: 100%; height: 20rpx;"></view>
						<view style="margin-top: 20rpx; border-bottom: 1rpx #cecece solid;" class="list" v-for="(item,index) in comment" :key="index">
							<view class="flx1">
								<view>{{item.name}}</view>
								<view style="margin-left:20rpx;">
									<u-rate :count="5" v-model="item.pj" :readonly='true'
										activeColor='#faad16'></u-rate>
								</view>
							</view>
							<view class="PatientEvaluation_text">
								{{item.text}}
							</view>
							<view class="flx1">
								<view class="stylelabel" v-for="(items,indexi) in item.arrayl" :key="indexi">
									{{items}}
								</view>
							</view>
							<view style="width: 100%; height: 20rpx;"></view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				userInfo: {
					name: '',
					zw: '主任医生 | 教授',
					ks: '皮肤科',
					hospital: '中国医学科学院北京协和医院'
				},
				userxxInfo: {
					pm: '5.0',
					pv: '99%',
					number: '750',
					date: 45,
					begood: '擅长各种湿疹、特应性皮炎、座疮、毛囊炎、银屑病、白癫风、太田痣、纹身、纹眉、雀斑、老年毛囊炎、银屑病、白癫风、太田痣、纹身、纹眉、雀斑',
					meinfo: '姜国调，北京协和医院皮肤科主任医师、教授、1977年毕业于北京医学院医疗系(现北京大学医学院)北京协和医院皮肤科主任医师北京协和医院皮肤科主任医师'
				},
				visitinfo: {
					hospital: '中国医学科学院北京协和医院',
					status: 0,
				},
				xxlist: [{
						week: '周四',
						date: '04/27'
					},
					{
						week: '周五',
						date: '04/28'
					},
					{
						week: '周六',
						date: '04/29'
					},
					{
						week: '周日',
						date: '04/30'
					},
					{
						week: '周一',
						date: '05/01'
					},
					{
						week: '周二',
						date: '05/02'
					}
				],
				comment: [{
						name: '11**',
						text: '姜医生医术真的很了不起，一眼断定我的病是什么。而且感觉态度也很好，问了好一些问题，病因也确定了，目前已经治好了，感谢姜医生。',
						arrayl: ['亲切', '技术精湛', '经验丰富', '66厉害'],
						pj: 5,
					},
					{
						name: '23***',
						text: '姜医生医术真的很了不起，一眼断定我的病是什么。而且感觉态度也很好，问了好一些问题，病因也确定了，目前已经治好了，感谢姜医生。',
						arrayl: ['技术精湛'],
						pj: 5,
					},
					{
						name: '344***',
						text: '姜医生医术真的很了不起，一眼断定我的病是什么。而且感觉态度也很好，问了好一些问题，病因也确定了，目前已经治好了，感谢姜医生。',
						arrayl: [],
						pj: 4,
					},
					{
						name: '85****',
						text: '多谢姜医生您高明的医术，及时确诊所患的疾病，才让我免于更加痛苦，非常得感谢。',
						arrayl: [],
						pj: 5,
					},
					{
						name: '96****',
						text: '很幸运约到了姜主任的号，两周之后复查，相信很快就痊愈了。',
						arrayl: [],
						pj: 5,
					},
					{
						name: '2****',
						text: '姜主任非常的认真仔细，不会什么事情都交给医助去做，他会根据病情和检查结果给出合理的建议和解决方案，病人了解自己的情况就不紧张也不担心了，所以强烈推荐挂姜主任的号。',
						arrayl: [],
						pj: 5,
					},
					{
						name: '111****',
						text: '姜医生医术真的很了不起，一眼断定我的病是什么。',
						arrayl: [],
						pj: 5,
					}
				]
			}
		},
		onLoad(params) {
			let array =  JSON.parse(decodeURIComponent(params.datas))
			console.log(array);
			this.userInfo.name = array.name
			console.log(this.userInfo);
			let arrays = uni.getStorageSync('yyname')
			this.userxxInfo.begood = array.text
			this.userInfo.hospital = arrays
			this.visitinfo.hospital = arrays
			this.userxxInfo.meinfo = `${array.name}, 北京协和医院皮肤科主任医师、教授、1977年毕业于北京医学院医疗系(现北京大学医学院)北京协和医院皮肤科主任医师北京协和医院皮肤科主任医师`
			console.log(this.userInfo);
		},
		methods:{
			moreRegister(){	
				uni.navigateTo({
					url:"/pages/reservationRegister/register?datas=" + JSON.stringify(this.userInfo) 
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f5f3;
	}

	.backgrpund {
		width: 100%;
		height: 450rpx;
		background: linear-gradient(#0c8efc, #00b8fe);

		.headerStyle {
			width: 95%;
			margin: 0 auto;

			.headerName {
				font-size: 40rpx;
				color: #fff;
				font-weight: 600;
				letter-spacing: 2rpx;
			}

			.headertext {
				font-size: 30rpx;
				color: #fff;
				margin-top: 10rpx;
			}

			.headerStyle_header {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;

				}
			}
		}
	}

	.dottor {
		width: 95%;
		margin-left: 2.5%;
		padding: 15rpx;
		overflow: hidden;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;

		.dottor_ {
			width: 95%;
			margin: 0 auto;

			.dottor_one {
				.dottor_text {
					.dottor_text_one {
						text-align: center;
						font-size: 35rpx;
						font-weight: 600;
						letter-spacing: 1rpx;
					}

					.dottor_text_two {
						text-align: center;
						font-size: 25rpx;
						color: #cecece;
						letter-spacing: 1rpx;
					}
				}
			}

			.dottor_one :first-child {
				.dottor_text_one {
					color: #ff7d00;
				}
			}

			.dottor_info {
				margin-top: 20rpx;

				.dottor_info_header {
					font-size: 30rpx;
					color: #6a93e5;
					letter-spacing: 1rpx;
					font-weight: 600;
				}

				.dottor_info_text {
					margin-left: 20rpx;
					font-size: 30rpx;
					color: #cdced0;
				}
			}

		}

		.border_ {
			width: 100%;
			height: 1rpx;
			background-color: #cecece;
			margin-top: 20rpx
		}
	}

	.more_text {
		color: #94b0ed;
		font-size: 30rpx;
	}

	.VisitingInformation {
		width: 95%;
		margin: 0 auto;

		.VisitingInformation_header {
			font-size: 40rpx;
			font-weight: 600;
			color: #333;
		}

		.VisitingInformation_b {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 15rpx;
			overflow: hidden;
			box-sizing: border-box;

			.VisitingInformation_b_left {
				width: 40rpx;
				background-color: #feeedc;
				text-align: center;
				font-size: 25rpx;
				height: 100rpx;
				line-height: 30rpx;
				border-radius: 20rpx;
				color: #faa002;
				padding: 6rpx;
				overflow: hidden;
				box-sizing: border-box;
			}

			.VisitingInformation_b_left_ {
				margin-left: 20rpx;

				.VisitingInformation_b_header {
					font-size: 35rpx;
					font-weight: 600;
					letter-spacing: 1rpx;
					margin-top: 5rpx;
				}

				.VisitingInformation_b_ks {
					margin-top: 10rpx;
					color: #cdced0;
					font-size: 25rpx;
				}
			}

			.VisitingInformation_yh {
				font-size: 20rpx;
				background-color: #49d621;
				border-radius: 4rpx;
				padding: 5rpx;
				color: #fff;
				height: 30rpx;
			}

		}
	}

	.datestyle {
		width: 98%;
		margin-left: 20rpx;

		.datestyle_index {
			background-color: #f7f8fa;
			border-radius: 10rpx;
			height: 75rpx;
			width: 85rpx;

			.datestyle_index_z {
				font-size: 25rpx;
				color: #d1d3d9;
				text-align: center;
			}

			.datestyle_index_d {
				color: #333;
				font-size: 26rpx;
				font-weight: 600;
				margin-top: 3rpx;
				text-align: center;
			}
		}
	}

	.datestyle_index_one {
		background-color: #f7f8fa;
		border-radius: 10rpx;
		height: 75rpx;
		width: 85rpx;
	}

	.PatientEvaluation {
		width: 100%;
		margin: 0 auto;
		background-color: #eff3fe;
		margin-top: 50rpx;
		overflow: hidden;
		box-sizing: border-box;

		.PatientEvaluation_header {
			font-size: 40rpx;
			font-weight: 600;
			color: #333;
			margin-top: 0rpx;

			span {
				font-size: 20rpx;
				font-weight: 500;
			}
		}

		.PatientEvaluation_text {
			font-size: 28rpx;
			margin-top: 20rpx;
		}

		.stylelabel {
			background-color: #4477f1;
			color: #fff;
			font-size: 25rpx;
			text-align: center;
			padding: 5rpx;
			border-radius: 8rpx;
			margin-left: 10rpx;
			margin-top:20rpx;
		}
	}
</style>